<template>
  <div class="order-wrapper">
    <div class="order-main">
      <mt-header title="订单信息确认">
        <router-link to="/home/productlist" slot="left">
          <div>
            <i class="fa fa-fw fa-chevron-left icon"></i><span>返回 </span>
          </div>
        </router-link>
        <!--<mt-button icon="more" slot="right"></mt-button>-->
      </mt-header>
      <zl-receipt :foodsInCart="foodsInCart" :shop="shop">
      </zl-receipt>
      <div class="since-info-container">
        <div class="field-wrapper">
          <yd-cell-group>
            <yd-cell-item>
              <span slot="left">联系人：</span>
              <yd-input slot="right" required v-model="order.custname" max="20" placeholder="请输入联系人"></yd-input>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left">联系方式：</span>
              <yd-input slot="right" required v-model="order.custtel" max="20" placeholder="请输入联系方式"
                        regex="mobile"></yd-input>
            </yd-cell-item>
            <yd-cell-item arrow>
              <span slot="left">自提时间：</span>
              <yd-datetime :startDate="minsinceTime" v-model="order.sinceTime"
                           slot="right"></yd-datetime>
            </yd-cell-item>
            <yd-cell-item arrow>
              <span slot="left">备注信息:</span>
              <span slot="right" @click="showRemarkInuput">{{order.remark === '' ? '口味/偏好等' : order.remark}}</span>
            </yd-cell-item>
            <yd-cell-item arrow>
              <span slot="left" @click="onSelectPayType">支付方式:</span>
              <span slot="right" @click="onSelectPayType">{{order.payType}}支付</span>
            </yd-cell-item>
          </yd-cell-group>
        </div>
      </div>
      <div class="send-info-container">
        <div class="field-wrapper">
          <yd-cell-group>
            <yd-cell-item arrow>
              <span slot="left">配送时间：</span>
              <!--question-circle-o-->
              <div slot="right" class="right-wrapper">
                <yd-datetime :startDate="minsinceTime" v-model="order.sinceTime"></yd-datetime>
                <span class="icon fa fa-question-circle-o" @click="openPop"></span>
                <mt-popup v-model="popupVisible"  class="mint-popup" :modal="false">
                  <p>配送时间约为1个小时左右</p>
                </mt-popup>
              </div>

            </yd-cell-item>
            <yd-cell-item arrow>
              <span slot="left">备注信息:</span>
              <span slot="right" @click="showRemarkInuput">{{order.remark === '' ? '口味/偏好等' : order.remark}}</span>
            </yd-cell-item>
            <yd-cell-item arrow>
              <span slot="left" @click="onSelectPayType">支付方式:</span>
              <span slot="right" @click="onSelectPayType">{{order.payType}}支付</span>
            </yd-cell-item>
          </yd-cell-group>
        </div>
      </div>
      <yd-actionsheet :items="payActions" v-model="payTypeSelecterVisble"></yd-actionsheet>
    </div>
    <zl-remark ref="remark" :order="order"></zl-remark>
    <div class="pay-wrapper">
      <div class="pay-content">
        <div class="left-content">
          <div class="ordermy">待支付 ￥{{ordermy}}</div>
        </div>
        <div class="right-content">
          <div class="paybutton" @click="pay">
            去支付
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  // mapActions
  import {mapGetters} from 'vuex';
  import receipt from './receipt.vue';
  import orderRemark from './orderRemark.vue';
  import {DateTime} from 'vue-ydui/dist/lib.px/datetime';
  import {CellGroup, CellItem} from 'vue-ydui/dist/lib.px/cell';
  import {Utils} from '../../utils/utils';
  import {Input} from 'vue-ydui/dist/lib.px/input';
  import {TextArea} from 'vue-ydui/dist/lib.px/textarea';
  import {Header, Popup} from 'mint-ui';
  import {ActionSheet} from 'vue-ydui/dist/lib.px/actionsheet';
  import router from '@/router';

  export default {
    data() {
      let now = new Date();
      let minsinceTime = Utils.dateFtt('yyyy-MM-dd hh:mm', now);
      return {
        order: {
          custname: '',
          custtel: '',
          remark: '',
          sinceTime: '',
          payType: '储值卡'
        },

        popupVisible: false,
        minsinceTime: minsinceTime,
        payActions: [
          {
            label: '储值卡支付',
            method: this.onZlCardSelected
          },
          {
            label: '微信支付',
            method: this.onWechatPaySelected
          },
          {
            label: '积分支付',
            method: this.onBonusPointsSelected
          }
        ],
        payTypeSelecterVisble: false
      };
    },
    name: 'orderConfirm',
    components: {
      'zl-receipt': receipt,
      'zl-remark': orderRemark,
      'yd-datetime': DateTime,
      'yd-cell-group': CellGroup,
      'yd-cell-item': CellItem,
      'yd-input': Input,
      'yd-textarea': TextArea,
      'm-header': Header,
      'yd-actionsheet': ActionSheet,
      'mt-popup': Popup
    },
    methods: {
      onSelectPayType() {
        if (!this.payTypeSelecterVisble) {
          this.payTypeSelecterVisble = true;
        }
      },
      onZlCardSelected() {
        this.order.payType = '储值卡';
      },
      onWechatPaySelected() {
        this.order.payType = '微信';
      },
      onBonusPointsSelected() {
        this.order.payType = '积分';
      },
      showRemarkInuput() {
        this.$refs.remark.show();
      },
      pay() {
        alert('正在使用' + this.order.payType + '支付...');
        router.replace({name: 'orders'});
      },
      openPop() {
        this.popupVisible = true;
      }
    },
    watch: {
      popupVisible(val) {
        if (val) {
          setTimeout(() => {
            this.popupVisible = false;
          }, 2000);
        }
      }
    },
    computed: {
      ...mapGetters({
        shop: 'selectedShop',
        goodlist: 'currentShopGoods'
      }),
      foodsInCart() {
        let foods = [];
        this.goodlist.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count) {
              foods.push(food);
            }
          });
        });
        return foods;
      },
      ordermy() {
        let total = 0;
        this.foodsInCart.forEach((food) => {
          total += food.price * food.count;
        });
        if (this.shop.deliveryPrice) {
          total += this.shop.deliveryPrice;
        }
        return total;
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .order-wrapper
    position fixed
    top 0
    bottom 0
    height 100%
    background-color rgb(245, 246, 246)
    width 100%

  .order-main
    overflow auto
    position absolute
    top 0
    bottom 48px
    width 100%
    .mint-header
      background #141d27
    .since-info-container
      margin 12px
      box-shadow: 1px 1px 10px #888888;
      background-color #fff
      display flex
      flex-direction column
      justify-content center
      align-items center
      .field-wrapper
        background-color #fff
        width 100%
        .m-cell-box
          height 100%
          margin-bottom 0px
        .cell-title
          height 20px
          line-height 20px
        .cell-item
          width 95%
    .send-info-container
      margin 12px
      box-shadow: 1px 1px 10px #888888;
      background-color #fff
      display flex
      flex-direction column
      justify-content center
      align-items center
      .field-wrapper
        background-color #fff
        width 100%
        .right-wrapper
          .mint-popup
            width: 100%;
            height: 50px;
            text-align: center;
            background-color: rgba(0, 0, 0, .7);
            backface-visibility: hidden;
            P
              line-height: 50px;
              color: #fff;
          .icon
            display inline
            margin-left 12px
            font-size 16px
          .datetime-input
            display inline
        .m-cell-box
          height 100%
          margin-bottom 0px
        .cell-title
          height 20px
          line-height 20px
        .cell-item
          width 95%

  .pay-wrapper
    width 100%
    position absolute
    bottom 0px
    .pay-content
      height 48px
      display flex
      font-size 0px
      background #141d27
      .left-content
        flex 1
        .ordermy
          display inline-block
          text-align top
          line-height 24px
          margin-top 12px
          margin-left 24px
          padding-right 12px
          box-sizing border-box
          border-right 1px solid rgba(255, 255, 255, 0.1);
          font-size 16px
          font-weight 700
          color #ffffff
      .right-content
        flex 0 0 105px
        width 105px
        background #2b343c
        .paybutton
          height 48px
          line-height 48px
          text-align center
          background #00b43c
          color #ffffff
          font-size 15px
          font-weight 700
</style>
